<template>
  <div>
    <!-- 工具栏区域 -->
    <el-row :gutter="20">
      <el-col :span="18">
        <el-input
          placeholder="请输入车牌号进行查询"
          v-model="searchQuery"
          @keyup.enter.native="handleSearch"
          clearable
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleSearch"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="6" style="text-align: right">
        <el-button type="primary" icon="el-icon-plus" @click="TJCollectionForm"
          >添加</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="handleBatchDelete"
          :disabled="!selectedRowIds.length"
          >批量删除</el-button
        >
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-table
      :data="filteredTableData"
      border
      fit
      highlight-current-row
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        prop="unit_account"
        label="车牌号"
        width="250"
      ></el-table-column>
      <el-table-column prop="driver" label="司机" width="250"></el-table-column>
      <el-table-column
        prop="unit_name"
        label="车辆状态"
        width="250"
      ></el-table-column>
      <el-table-column label="使用时间" width="250">
  <template slot-scope="scope">
    {{ formatDate(scope.row.create_time) }}
  </template>
</el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="BJCollectionForm(scope.row)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 50]"
      :page-size="pagination.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      style="margin-top: 20px"
    ></el-pagination> -->

    <!-- 添加/编辑车辆对话框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      @close="handleDialogClose"
      :title="dialogStatus === 'create' ? '添加车辆' : '编辑车辆'"
      width="30%"
    >
      <el-form
        :model="vehicleForm"
        :rules="rules"
        ref="vehicleForm"
        label-width="100px"
      >
        <el-form-item label="车牌号" prop="unit_account">
          <el-input v-model="vehicleForm.unit_account"></el-input>
        </el-form-item>
        <el-form-item label="司机" prop="driver">
          <el-input v-model="vehicleForm.driver"></el-input>
        </el-form-item>
        <el-form-item label="车辆状态" prop="unit_name">
          <el-select
            v-model="vehicleForm.unit_name"
            placeholder="请选择车辆状态"
          >
            <el-option label="闲置" value="闲置"></el-option>
            <el-option label="正在使用" value="正在使用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="使用时间"
          prop="create_time"
          v-if="dialogStatus === 'create'"
        >
          <el-date-picker
            v-model="vehicleForm.create_time"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="使用时间" v-else>
          <span>{{ formatDate(vehicleForm.create_time) }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "VehicleManagement",
  data() {
    return {
      searchQuery: "",
      tableData: [
        { id: 1, unit_account: "京A12345", driver: "张三", unit_name: " 闲置", create_time: "2023-07-25" },
        { id: 2, unit_account: "京B67890", driver: "李四", unit_name: "闲置", create_time: "2023-08-10" },
        { id: 3, unit_account: "京C11111", driver: "王五", unit_name: "闲置", create_time: "2022-05-15" },
        { id: 1, unit_account: "京A12345", driver: "张三", unit_name: " 闲置", create_time: "2023-07-25" },
        { id: 2, unit_account: "京B67890", driver: "李四", unit_name: "闲置", create_time: "2023-08-10" },
        { id: 3, unit_account: "京C11111", driver: "王五", unit_name: "闲置", create_time: "2022-05-15" },
        { id: 1, unit_account: "京A12345", driver: "张三", unit_name: " 闲置", create_time: "2023-07-25" },
        { id: 2, unit_account: "京B67890", driver: "李四", unit_name: "闲置", create_time: "2023-08-10" },
        { id: 3, unit_account: "京C11111", driver: "王五", unit_name: "闲置", create_time: "2022-05-15" }
      ],
      pagination: {
        page: 1,
        limit: 10,
        total: 0,
      },
      selectedRowIds: [],
      dialogVisible: false,
      dialogStatus: "create",
      vehicleForm: {
        id: "",
        unit_account: "",
        driver: "",
        unit_name: "",
        create_time: "",
      },
      rules: {
        unit_account: [
          { required: true, message: "请输入车牌号", trigger: "blur" },
        ],
        driver: [
          { required: true, message: "请输入司机姓名", trigger: "blur" },
        ],
        unit_name: [
          { required: true, message: "请选择车辆状态", trigger: "change" },
        ],
        create_time: [
          {
            type: "date",
            required: true,
            message: "请选择使用时间",
            trigger: "change",
          },
        ],
      },
      customTime: "", // 用户自定义的使用时间
    };
  },
  
  computed: {
    filteredTableData() {
      if (!this.searchQuery) return this.tableData;
      return this.tableData.filter((item) =>
        item.unit_account.includes(this.searchQuery)
      );
    },
  },
  filters: {
    formatDate(time) {
      return new Date(time).toLocaleString();
    },
  },
  methods: {
    handleSearch() {
      this.pagination.page = 1;
    },
    handleSizeChange(size) {
      this.pagination.limit = size;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.fetchData();
    },
    fetchData() {
      // 模拟数据加载逻辑
      this.tableData = this.filteredTableData.slice(
        (this.pagination.page - 1) * this.pagination.limit,
        this.pagination.page * this.pagination.limit
      );
      this.pagination.total = this.filteredTableData.length;
    },
    handleDelete(row) {
      this.$confirm("确定要删除这条记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const index = this.tableData.findIndex((item) => item.id === row.id);
          if (index > -1) {
            this.tableData.splice(index, 1);
          }
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    handleSelectionChange(selection) {
      this.selectedRowIds = selection.map((item) => item.id);
    },
    handleBatchDelete() {
      this.$confirm("确定要删除选中的记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData = this.tableData.filter(
            (item) => !this.selectedRowIds.includes(item.id)
          );
          this.selectedRowIds = [];
          this.$message.success("批量删除成功");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    TJCollectionForm() {
      this.dialogStatus = "create";
      this.dialogVisible = true;
      this.vehicleForm = { ...this.$options.data().vehicleForm };
      this.vehicleForm.create_time = new Date(); // 初始化时间为当前时间
    },
    BJCollectionForm(row) {
      this.dialogStatus = "update";
      this.dialogVisible = true;
      this.vehicleForm = { ...row };
    },
    handleDialogClose() {
      this.$refs.vehicleForm.resetFields();
    },
    submitForm() {
      this.$refs.vehicleForm.validate((valid) => {
        if (valid) {
          let index = this.tableData.findIndex(
            (item) => item.id === this.vehicleForm.id
          );
          let newVehicle = {
            ...this.vehicleForm,
            create_time:
              this.vehicleForm.create_time instanceof Date
                ? this.vehicleForm.create_time.toISOString()
                : new Date(this.vehicleForm.create_time).toISOString(),
          };
          if (this.dialogStatus === "create") {
            newVehicle.id = Date.now(); // 简单的ID生成逻辑
            this.tableData.push(newVehicle);
          } else if (this.dialogStatus === "update" && index !== -1) {
            this.tableData.splice(index, 1, newVehicle);
          }
          this.dialogVisible = false;
          this.$message.success("操作成功");
          this.fetchData();
        }
      });
    },
    applyCustomTime() {
      if (this.customTime) {
        this.tableData.forEach((row) => {
          row.create_time = this.customTime;
        });
        this.fetchData();
      }
    },
    formatDate(time) {
      return new Date(time).toLocaleString();
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style scoped>
/* 你的自定义样式 */
</style>